<template>
    <div class="search">
        <div class="search-item">
            <div :class="{ 'search-active': currentSearchCateIdx == -1 }" @click="currentSearchCateIdx = -1">收藏</div>

            <div :class="{ 'search-active': currentSearchCateIdx == idx }" v-for="(item, idx) in searchEngines" key="item.id" @click="currentSearchCateIdx = idx">{{ item.name }}</div>
        </div>
        <div class="ipt"><input ref="ipt" v-model="searchWords" @input="bookmarkFilter" @keyup.enter="search" type="text" /></div>
        <div class="search-item">
            <div :class="{ 'search-active': currentSearchIdx == idx }" v-for="(item, idx) in currentSearches" key="item.id" @click="changeCurrentSearchIdx(idx)">{{ item.name }}</div>
        </div>
    </div>
</template>

<script setup>
import { onBeforeUpdate, onMounted, ref, watch } from "vue";
import { storage } from "wxt/storage";

const props = defineProps(["searchEngines"]);
const emits = defineEmits(["filter"]);

// 当前搜索引擎分类索引
const currentSearchCateIdx = ref(null);
// 当前搜索引擎
const currentSearches = ref(null);
// 当前搜索引擎索引
const currentSearchIdx = ref(null);

const searchWords = ref(null);
const ipt = ref(null);

onBeforeUpdate(async () => {
    currentSearchIdx.value = await storage.getItem("local:currentSearchIdx");
    currentSearchCateIdx.value = await storage.getItem("local:currentSearchCateIdx");
    if (props.searchEngines && props.searchEngines.length > 0 && currentSearchCateIdx.value > -1 && props.searchEngines[currentSearchCateIdx.value]) {
        currentSearches.value = props.searchEngines[currentSearchCateIdx.value].search_engines;
    }
});

onMounted(() => {
    if (ipt.value) {
        ipt.value.focus();
    }
});

watch(
    () => currentSearchCateIdx.value,
    async (newValue, oldValue) => {
        await storage.setItem("local:currentSearchCateIdx", newValue);
        if (newValue < 0) {
            currentSearches.value = [];
        } else {
            currentSearches.value = props.searchEngines[newValue].search_engines;
            currentSearchIdx.value = 0;
        }
    },
);

const changeCurrentSearchIdx = async (idx) => {
    currentSearchIdx.value = idx;
    await storage.setItem("local:currentSearchIdx", idx);
};

const bookmarkFilter = () => {
    emits("filter", searchWords.value);
};

const search = () => {
    if (currentSearchCateIdx.value < 0) {
        //收藏夹搜索
        emits("filter", searchWords.value);
        searchWords.value = null;
    } else {
        //搜索引擎
        let url = props.searchEngines[currentSearchCateIdx.value].search_engines[currentSearchIdx.value].uri;
        url = url.replace("%s", searchWords.value);
        window.open(url, "_blank");
    }
};
</script>

<style scoped>
.search {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.search-item {
    display: flex;
}

.search-item > div {
    padding: 10px 20px;
    cursor: pointer;
}

.ipt {
    width: 62%;
    margin: 10px 20px;
}

.ipt > input {
    width: 100%;
    height: auto;
    font-size: 23px;
    border-radius: 5px;
    padding: 10px 20px;
}

.search-active {
    background-color: var(--bg1);
    border-radius: 5px;
}
</style>
